<template>
    <div class="home-classic">
        <h3>经典歌单</h3>
        <div class="wrapper" ref="wrapper">
            <ul class="content" ref="content">
                <li v-for="(item, index) in listData" :key="index">
                    <div class="cover">
                        <van-image :src="item.cover_url_small" radius="1rem" />
                        <span>{{ item.access_num | numFilter(1)}}万</span>
                    </div>
                <span>{{ item.title }}</span>
                </li>
            </ul>
        </div>
    </div>


</template>


<script>
import {betterScrollHorizontal} from '../../common/betterScroll.js';
    export default{
        data() {
      return {
        listData: [],
        pageNo:1,
        pageSize:6,
        id:71
      };
    },
        created(){
            this.getData(this.id,this.pageNo,this.pageSize);
        },
      methods:{
        getData(id,pageNo,pageSize){
            this.$request("get", "/recommend/playlist",{
                id,
                pageNo,
                pageSize
            }).then((res) => {
          // console.log(res);
          if (res.result == 100) {
            this.listData = res.data.list;
          }
          //调用横向滚动的方法
          betterScrollHorizontal(
            this,
            this.$refs.wrapper,
            this.$refs.content,
            this.listData.length,
            10)
        });
    }, 
      },
}

</script>


<style scoped>
 .wrapper{
    width: 100%;/*容器的宽度就是屏幕的宽度*/
    overflow: hidden;
  }
  ul.content > li {
    display: inline-block;
    width: 10rem;
    vertical-align: top;
  }
  ul.content > li *{
    margin:0 0.1rem;
  }
  ul.content >li > span{
    font-size: 0.8rem;
    color: #625858;
  }
  .cover > span{
    position: absolute;
    right: 0;
    bottom: 0.4rem;
    background: color #a6a0a0;
    color: white;
    width: 5rem;
    border-radius: 1rem;
  }
  .cover{
    position: relative;
  }

</style>